<template>
	<view @click="isYearSelector.open()">
		<slot></slot>
	</view>
	<myPopupVue ref="isYearSelector" type="bottom" :takeStyle="tagChooseStyle">
		<view class="monthSelector" :style="'padding-bottom: ' + (props.haveTabbar ? 'var(--window-bottom)':'0.5em') + ';'">
			<view class="monthSelector_top">
				<view class="monthSelector_top_mainTime">
					{{showTheYearT}}
				</view>
				<view class="monthSelector_top_confirm" @click="overYearChoose()">
					确认
				</view>
			</view>
			<picker-view :value="showTheYear" class="monthSelector_main" @change="chooseYear"
				mask-style="display:none" indicator-class="monthSelector_main_item_active">
				<picker-view-column>
					<view class="monthSelector_main_item" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
			</picker-view>
		</view>
	</myPopupVue>
</template>

<script setup>
	import myPopupVue from '@/components/base/myPopup.vue';
	import {
		dateTypeFormat
	} from "@/uitls/tool.js"
	import {
		ref,
		watch
	} from "vue"
	import store from "@/store/index.js"
	const tagChooseStyle = {
		borderBottomRightRadius: "0px",
		borderBottomLeftRadius: "0px",
		borderBottom: "none",
		borderLeft: "none",
		borderRight: "none",
	}
	const props = defineProps({
		baseTime: String,
		haveTabbar: {
			type: Boolean,
			default: false
		}
	})
	const isYearSelector = ref()
	const baseTimeDate = ref()
	watch(() => props.baseTime, (n) => {
		baseTimeDate.value = new Date(props.baseTime)
	}, {
		immediate: true
	})
	const years = Array.from({
		length: 11
	}, (_, i) => new Date().getFullYear() + i - 5)
	
	const showTheYear = ref([years.indexOf(baseTimeDate.value.getFullYear())])
	const showTheYearT = ref(`${years[showTheYear.value[0]]}`)
	const chooseYear = (e) => {
		showTheYear.value = e.detail.value
		showTheYearT.value = years[showTheYear.value[0]]
	}
	
	const emit = defineEmits(['overYearChoose'])
	const overYearChoose = () => {
		isYearSelector.value.close()
		emit('overYearChoose', years[showTheYear.value[0]])
	}
</script>

<style lang="scss" scoped>
	@import "@/style/base.scss";

	.monthSelector {
		height: 50vh;
		padding: 0.5em 1em;
		left: 0;
		right: 0;
		z-index: 99;
		display: flex;
		flex-direction: column;
		color: $baseBlack;

		&_top {
			position: relative;
			color: $baseBlack_mid;
			height: 2em;
			display: flex;
			justify-content: center;
			align-items: center;

			&_mainTime {
				display: flex;
				justify-content: center;
				align-items: center;
				letter-spacing: 0.1em;
				font-weight: bold;
			}

			&_confirm {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translate(-50%, -50%);
				font-weight: bold;
			}
		}

		&_main {
			flex: 1;

			&_item {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			::v-deep .monthSelector_main_item_active {
				border-bottom: $baseColorBorder;
				border-top: $baseColorBorder;
			}
		}
	}
</style>